<template>
<body>
<Header></Header>
<div class="grid_3">
  <div class="container">
   <div class="breadcrumb1">
     <ul>
        <a href="index.html"><i class="fa fa-home home_1"></i></a>
        <span class="divider">&nbsp;|&nbsp;</span>
        <li class="current-page">About</li>
     </ul>
   </div>
   <div class="about">
   	  <div class="col-md-6 about_left">
   	  	<img :src="'http://47.97.218.145'+user.img" height="350px" width="400px" alt="用户图片" usemap="#planetmap"/>
		<map name="planetmap" id="planetmap">
			<!-- <area shape="circle" coords="180,139,14" href ="venus.html" alt="关注" />
			<area shape="circle" coords="129,161,10" href ="mercur.html" alt="关注" /> -->
			<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="关注" />
		</map>
   	  </div>
		 
   	  <div class="col-md-6 about_right" style="margin-left:0px;margin-top:30px;">
   	  	<h1>{{user.nickname}}</h1>
   	  	<p>{{user.friend_show=='' ? '这家伙很懒，什么都没留下^_^':user.friend_show}}</p>
   	  	<div class="accordation">
		   <div class="jb-accordion-wrapper">
				<div class="jb-accordion-title">关注TA <button type="button" class="jb-accordion-button"><i class="fa fa-angle-down" @click="follow">关注TA</i></button></div>
				<p><!-- /.accordion-title -->
				</p><div id="accordion-1-" class="jb-accordion-content collapse in" style="height: auto;">
				
				</div>
				<p><!-- /.collapse --></p>
			</div>
			<div class="jb-accordion-wrapper">
				<div class="jb-accordion-title">送TA礼物 <button type="button" class="jb-accordion-button"><i class="fa fa-angle-down" >送TA礼物 </i></button></div>
				<p><!-- /.accordion-title -->
				</p><div id="accordion2-" class="jb-accordion-content collapse ">
				
				</div>
				<p><!-- /.collapse --></p>
			</div>
			<div class="jb-accordion-wrapper">
				<div class="jb-accordion-title">留言<button type="button" class="jb-accordion-button"><i class="fa fa-angle-down">留言 </i></button></div>
				<p><!-- /.accordion-title -->
				</p><div id="accordion3" class="jb-accordion-content collapse ">
				
				</div>
				<p><!-- /.collapse --></p>
			</div>
		</div>
   	  </div>
   	  <div class="clearfix"> </div>
   </div>
  </div>
</div>
<div class="about_middle">
	<div class="container">
	  <h2>Happy Clients</h2>
	  <div class="about_middle-grid1">
		<div class="col-sm-6 testi_grid list-item-0">
			<blockquote class="testi_grid_blockquote">
				<figure class="featured-thumbnail">
					<img src="images/a1.jpg" class="img-responsive" alt=""/>
				</figure>
				<div><a href="#">Aenean nonummy hendrerit mau phasellu porta. Fusce suscipit varius mi sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui.…</a>
				<div class="clearfix"></div>
				</div>
			</blockquote>
		    <small class="testi-meta"><span class="user">Eiusmod tempor incididunt</span></small>
		</div>
		<div class="col-sm-6 testi_grid list-item-1">
			<blockquote class="testi_grid_blockquote">
				<figure class="featured-thumbnail">
					<img src="images/a2.jpg" class="img-responsive" alt=""/>
				</figure>
				<div><a href="#">Aenean nonummy hendrerit mau phasellu porta. Fusce suscipit varius mi sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui.…</a>
				<div class="clearfix"></div>
				</div>
			</blockquote>
			<small class="testi-meta1"><span class="user">Sint occaecat </span></small>
		</div>
		<div class="clearfix"> </div>
	  </div>
	  <div class="about_middle-grid2">
		<div class="col-sm-6 testi_grid list-item-0">
			<blockquote class="testi_grid_blockquote">
				<figure class="featured-thumbnail">
					<img src="images/a1.jpg" class="img-responsive" alt=""/>
				</figure>
				<div><a href="#">Aenean nonummy hendrerit mau phasellu porta. Fusce suscipit varius mi sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui.…</a>
				<div class="clearfix"></div>
				</div>
			</blockquote>
		    <small class="testi-meta"><span class="user">Eiusmod tempor incididunt</span></small>
		</div>
		<div class="col-sm-6 testi_grid list-item-1">
			<blockquote class="testi_grid_blockquote">
				<figure class="featured-thumbnail">
					<img src="images/a2.jpg" class="img-responsive" alt=""/>
				</figure>
				<div><a href="#">Aenean nonummy hendrerit mau phasellu porta. Fusce suscipit varius mi sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui.…</a>
				<div class="clearfix"></div>
				</div>
			</blockquote>
			<small class="testi-meta1"><span class="user">Sint occaecat </span></small>
		</div>
		<div class="clearfix"> </div>
	  </div>
	</div>
</div>
<div class="about_bottom">
	<div class="container">
		<h3>Team</h3>
	   <div class="col-md-3 about_grid1">
		  <ul class="posts-grid our-team">
			<li class="list-item-1">
				<figure class="thumbnail_1 thumbnail">
					<a href="#"><img src="images/a4.jpg"  class="img-responsive" alt=""/></a>
					<div class="post_networks">
						<ul>
							<li class="network_0"><a href="#" title=""><i class="fa fa-facebook"></i></a></li>
						</ul>
					</div>
			    </figure>
			    <div class="desc">
			    	<h4><a href="#">Perspiciatis</a></h4>
			    	<p>Lorem ipsum dolor sit amet,</p>
			    </div>
			 </li>
	       </ul>
	   </div>
	   <div class="col-md-3 about_grid1">
		  <ul class="posts-grid our-team">
			<li class="list-item-1">
				<figure class="thumbnail_1 thumbnail">
					<a href="#"><img src="images/a5.jpg"  class="img-responsive" alt=""/></a>
					<div class="post_networks">
						<ul>
							<li class="network_0"><a href="#" title=""><i class="fa fa-facebook"></i></a></li>
						</ul>
					</div>
			    </figure>
			    <div class="desc">
			    	<h4><a href="#">Aspernatur </a></h4>
			    	<p>Lorem ipsum dolor sit amet,</p>
			    </div>
			 </li>
	       </ul>
	   </div>
	   <div class="col-md-3 about_grid1">
		  <ul class="posts-grid our-team">
			<li class="list-item-1">
				<figure class="thumbnail_1 thumbnail">
					<a href="#"><img src="images/a6.jpg"  class="img-responsive" alt=""/></a>
					<div class="post_networks">
						<ul>
							<li class="network_0"><a href="#" title=""><i class="fa fa-facebook"></i></a></li>
						</ul>
					</div>
			    </figure>
			    <div class="desc">
			    	<h4><a href="#">Temporibus</a></h4>
			    	<p>Lorem ipsum dolor sit amet,</p>
			    </div>
			 </li>
	       </ul>
	   </div>
	   <div class="col-md-3 about_grid1">
		  <ul class="posts-grid our-team">
			<li class="list-item-1">
				<figure class="thumbnail_1 thumbnail">
					<a href="#"><img src="images/a7.jpg"  class="img-responsive" alt=""/></a>
					<div class="post_networks">
						<ul>
							<li class="network_0"><a href="#" title=""><i class="fa fa-facebook"></i></a></li>
						</ul>
					</div>
			    </figure>
			    <div class="desc">
			    	<h4><a href="#">Serferendis</a></h4>
			    	<p>Lorem ipsum dolor sit amet,</p>
			    </div>
			 </li>
	       </ul>
	   </div>
	   <div class="clearfix"> </div>
	</div>
</div>

<Footer></Footer>
</body>
</template>

<script>
import axios from 'axios'
export default {
	name:'User_detail',
	data () {
	return {
		user:new Object()	
	}
	},
	mounted() {
		let id_ = undefined
		if((this.$route.params.id_)){ //判断用户是刷新操作访问还是通过其他页面访问
			window.sessionStorage.removeItem('id_')
			id_=this.$route.params.id_
			window.sessionStorage.setItem('id_',id_)
		}else{
			id_ = window.sessionStorage.getItem('id_')
		}
		axios({
			url:this.$api+'api/user/user_detail/',
			method:'get',
			params:{'user_id':id_}
		}).then((res)=>{
			console.log(res.data)
			this.user=res.data.message
		})
		axios({  //获取关注状态
			url:this.$api+'api/user/follow/',
			method:'get',
			params:{'user_two':id_}
		}).then((res)=>{
			console.log(res.data)
		})
	},
	methods:{
		follow(){
			let be_folloew_id=window.sessionStorage.getItem('id_')
			axios({
				url:this.$api+'api/user/follow/',
				method:'put',
				data:{'user_two':be_folloew_id},
				withCredentials:true,
			}).then((res)=>{
				if(res.data.code==4014){
					this.$router.push({name:'Login'})
				}else{
					alert(res.data.message)
				}
				
			})
		}
	}
}
</script>

<style>

</style>